<template>
  <div class="custom-icons-list">
    <active-icon v-if="show" />
    <com-icon v-else />
  </div>
</template>
<script>
const ActiveSvg = {
  template: `<svg t="1624021375534" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1061" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#51CC3E" p-id="1062"></path></svg>`
}
const ComSvg = {
  template: `<svg t="1624021865631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1203" width="200" height="200"><path d="M512 93.090909a418.909091 418.909091 0 1 0 418.909091 418.909091 419.374545 419.374545 0 0 0-418.909091-418.909091m0-93.090909A512 512 0 1 1 0 512 512 512 0 0 1 512 0z" fill="#888888" p-id="1204"></path></svg>`
}

const ActiveIcon = {
  template: `<a-icon :component="ActiveSvg" />`,
  data() {
    return {
      ActiveSvg
    }
  }
}
const ComIcon = {
  template: `<a-icon :component="ComSvg" />`,
  data() {
    return {
      ComSvg
    }
  }
}
export default {
  components: {
    ActiveIcon,
    ComIcon
  },
  props: {
    show: {
      default: false,
      type: Boolean
    }
  }
}
</script>
<style scoped>
.custom-icons-list .anticon {
  margin-right: 6px;
}
</style>
